<template>
    <view class="container">
        <u-overlay :show="show" :opacity="0.8">
		<view class="warp" v-if="state=='wait'">
			<view class="title">恭喜您获得</view>
            <block v-if="verifyCode.giftType == 'nft'">
                <view class="image-border">
                    <u-image
                        :src="nft.img"
                        width="212rpx"
                        height="212rpx"
                    ></u-image>
                </view>
                <view class="name">
                    <u-text
                        :text="nft.name"
                        size="28rpx"
                        :lines="2"
                        align="center"
                    ></u-text>
                </view>
                <view class="nft-tag"></view>
                <view class="btn" @click="$u.throttle(submit, 1000)">立即领取</view>
            </block>
            <block v-if="verifyCode.giftType == 'point'">
                <view class="point-border">
                    <u-icon
                        name="/static/point.png"
                        width="73rpx"
                        height="73rpx"
                    ></u-icon>
                    <text>{{ verifyCode.giftUnit }}</text>
                </view>
                <view class="point-msg">——— 恭喜获得积分{{ verifyCode.giftUnit }}个 ———</view>
                <view class="btn" @click="$u.throttle(submit, 1000)" style="margin-top: 68rpx">立即领取</view>
            </block>
		</view>
        <u-transition :show="state == 'succ'" :duration="1500" mode="fade">
            <view class="success">
                <view class="title">领取成功</view>
                <view class="icon_succ"></view>
                <view class="msg">——— 奖励已发放至您的账户 ———</view>
                <view class="btn" style="margin-top: 32rpx" @click="navigateTo('pages/user/index')">我知道了</view>
            </view>
        </u-transition>
        <view v-if="state=='receive'" class="receive">
            <view class="title">该奖励已经领过啦</view>
            <view class="btn" style="margin-top: 52rpx" @click="navigateTo('pages/user/index')">我知道了</view>
        </view>
	</u-overlay>
    </view>
</template>

<script>
import { getCodeInfoData, receiveGift } from "@/config/api"
export default {
    data() {
        return {
            show: true,
            type: 'nft',
            state: "wait",
            verifyCode: {},
            nft: null,
            verifyDetail: null,
            code: null,
        }
    },
    onLoad(option) {
        const q = decodeURIComponent(option.q)
        this.code = this.queryParams("verify", q)
        this.getData(this.code)
    },
    methods: {
        async submit() {
            if (this.$store.getters.userId) {
                const res = await receiveGift({
                    code: this.code,
                    id: this.verifyCode.id
                })
                this.state = "succ"
            } else {
                await this.$store.dispatch("user/login")
            }
        },
        async getData(code) {
            const res = await getCodeInfoData({ code: code})
            this.verifyCode = res.verifyCode
            this.nft = res.nft
            this.verifyDetail = res.verifyDetail
            if (this.verifyDetail != null) {
                this.state = "receive"
            }
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
                type: "switchTab",
				params
			})
        },
        queryParams(name, url) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(url);
            return results == null ? null : results[1];
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        .btn {
            width: 442rpx;
            height: 80rpx;
            background: linear-gradient(214deg, #FFB4D3 0%, #AB6DFF 21%, #696CFF 61%, #74E3FF 100%);
            border-radius: 40rpx;
            text-align: center;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 80rpx;
            margin: 36rpx auto 0 auto;
        }
        .warp {
            position: absolute;
            width: 550rpx;
            height: 878rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/firstgrade/verify_nft_bg.png) no-repeat;
            background-size: 100% 100%;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            .title {
                margin-top: 210rpx;
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
            }
            .image-border {
                box-sizing: border-box;
                border-radius: 4rpx;
                border: 2rpx solid #000000;
                padding: 21rpx;
                width: 254rpx;
                height: 254rpx;
                margin: 60rpx auto 0 auto;
            }
            .name {
                padding: 0 60rpx;
                margin-top: 30rpx;
            }
            .nft-tag {
                width: 100rpx;
                height: 40rpx;
                background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/firstgrade/nft_tag.png) no-repeat;
                background-size: 100% 100%;
                margin: 24rpx auto 0 auto;
            }
            .point-border {
                width: 442rpx;
                height: 158rpx;
                background: #EFEBFF;
                border-radius: 20rpx;
                margin: 120rpx auto 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                text {
                    font-size: 80rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #356CE7;
                    margin-left: 20rpx;
                }
            }
            .point-msg {
                padding: 0 28rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #7698FE;
                text-align: center;
                margin-top: 96rpx;
            }
        }
        .success {
            position: absolute;
            width: 550rpx;
            height: 580rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/firstgrade/succ_bg.png) no-repeat;
            background-size: 100% 100%;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            .title {
                font-size: 50rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #356CE7;
                text-align: center;
                margin-top: 79rpx;
            }
            .icon_succ {
                width: 120rpx;
                height: 120rpx;
                background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/firstgrade/icon_success.png) no-repeat;
                background-size: 100% 100%;
                margin: 46rpx auto 0 auto;
            }
            .msg {
                padding: 0 28rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #7698FE;
                text-align: center;
                margin-top: 55rpx;
            }
        }
        .receive {
            position: absolute;
            width: 550rpx;
            height: 580rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/firstgrade/receive_bg.png) no-repeat;
            background-size: 100% 100%;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            .title {
                font-size: 38rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #356CE7;
                margin-top: 337rpx;
                text-align: center;
            }
        }
    }
</style>
